<template>
  <div class="page">
    <div class="background"></div>
    <div>
      <img src="../assets/images/title.png" alt="" />
      <div class="formData">
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          :model="formLabelAlign"
        >
          <h2>登录</h2>
          <el-form-item label="账号" prop="name">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="region">
            <el-input
              type="password"
              v-model="formLabelAlign.region"
            ></el-input>
          </el-form-item>
          <el-form-item prop="type">
            <el-radio v-model="formLabelAlign.type" label="1">教师</el-radio>
            <el-radio v-model="formLabelAlign.type" label="2">学生</el-radio>
          </el-form-item>
          <el-button type="primary" @click="submit">登录</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "axios";
export default {
  components: {},
  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: "1",
      },
      roleid: "210129111",
    };
  },
  computed: mapState({
    type(state) {
      return state.app.type;
    },
  }),
  created() {},
  methods: {
    submit() {
      let type = this.formLabelAlign.type;
      let id = this.formLabelAlign.name;
      let password = this.formLabelAlign.region;
      if (id === "") {
        this.$message({
          type: "warning",
          message: "账号为空，请输入账号",
        });
        return;
      } else if (password === "") {
        this.$message({
          type: "warning",
          message: "密码为空，请输入密码",
        });
        return;
      }
      console.log("---", type + "-" + name + "-" + password);
      axios
        .post("/api/user/login", {
          type,
          id,
          password,
        })
        .then((res) => {
          // alert(res.data.msg); //判断类型

          console.log("1111", res.data.roleid);
          localStorage.setItem("yh", res.data.roleid);
          var str1 = res.data.msg;
          if (str1.includes("成功")) {
            this.$message({
              type: "success",
              message: `"${str1}"`,
            });
            if (type === "1") {
              localStorage.setItem("lx", "1"); //代表教师
              this.$router.push({
                path: "/index",
              });
            }
            if (type === "2") {
              localStorage.setItem("lx", "2"); //代表学生
              this.$router.push({
                name: "index",
                query: {
                  roleid: res.data.roleid,
                },
              });
            }
            // console.log("学号1",this.$route.query.roleid)
          } else {
            this.$message({
              type: "warning",
              message: `"${str1}"`,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });

      // this.$router.push({
      //   path: "/index",
      // });
      console.log(this.formLabelAlign.type);
      this.$store.commit("app/setType", this.formLabelAlign.type);
    },
  },
};
</script>

<style lang="less" scoped>
// @import "~@/style/style.scss";
* {
  padding: 0;
  margin: 0;
}
.page {
  width: 100vw;
  height: 100vh;
  // max-height: 10.8rem;
  position: relative;
  overflow-y: hidden;
  .background {
    width: 100%;
    height: 100%;
    background: url(~@/assets/images/背景.png) no-repeat;
    background-size: 101% 100%;
    background-position: center;
    opacity: 0.6;
    position: absolute;
    z-index: -100;
  }
  .container {
    /*@include scrollBar;*/
    height: calc(100% - 64px);
    display: flex;
    // height: 100vh;
    // margin-top: 64px;
    overflow-y: auto;
    &.showSide {
      padding-left: 287px;
    }
  }
  .formData {
    width: 600px;
    height: 400px;
    // background: wheat;
    background: url(~@/assets/images/矩形1拷贝4.png) no-repeat;
    background-size: 110% 100%;
    background-position: 80% 110%;
    margin: 160px auto;
    /deep/ .el-form {
      width: 600px;
      height: 100%;
      padding: 20px 30px 0 10px;

      h2 {
        color: #22eeff;
      }
      .el-form-item {
        width: 100%;
        display: flex;
        height: 36px;
        margin: 40px auto;
        line-height: 36px;
        color: #ffffff;
        .el-form-item__content {
          margin-left: 10px !important;
        }
      }
      .el-input__inner {
        width: 400px;
        height: 30px;
      }
      .el-radio {
        margin-right: 60px;
        color: #ffffff;
      }
      .el-radio:nth-of-type(1) {
        margin-left: 200px;
      }
      .el-button {
        width: 60%;
        height: 30px;
      }
    }
  }
}
</style>
